<!--
 * @Descripttion: 
 * @version: 
 * @Author: Mr. Xu
 * @Date: 2020-12-14 10:44:37
 * @LastEditors: Mr. Xu
 * @LastEditTime: 2021-01-11 15:06:29
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>项目管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="robots" content="noindex,nofollow" />
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/common.css" media="all">
</head>
<style>
    .layui-form-item .layui-inline {
        width: 100%;
    }

    .new-form .layui-edge {
        right: 10px !important;
    }
</style>

<body class="page-body">
    <h2 class="comm-title">数据中心</h2>
    
    <div class="page-main flex mt" style="background-color: transparent;padding: 0;">
        <!-- <div class="flex_1 page-main-item box-shadow">
            <div class="item-title">项目数量</div>
            <div class="item-block flex mt text-center">
                <div class="flex_1">
                    <div class="number">{$data.project_today}</div>
                    <div class="number_lable">本日</div>
                </div>
                <div class="flex_1 mlr">
                    <div class="number">{$data.project_week}</div>
                    <div class="number_lable">本周</div>
                </div>
                <div class="flex_1">
                    <div class="number">{$data.project_all}</div>
                    <div class="number_lable">全部</div>
                </div>
            </div>
        </div> -->
        <div class="flex_1 page-main-item box-shadow ml">
            <div class="item-title">访问数量</div>
            <div class="item-block flex  mt text-center">
                <div class="flex_1">
                    <div class="number">{$data.visit_today}</div>
                    <div class="number_lable">本日</div>
                </div>
                <div class="flex_1 mlr">
                    <div class="number">{$data.visit_week}</div>
                    <div class="number_lable">本周</div>
                </div>
                <div class="flex_1">
                    <div class="number">{$data.visit_all}</div>
                    <div class="number_lable">全部</div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="page-main flex mt" style="background-color: transparent;padding: 0;">
        <div class="flex_1 page-main-item mr box-shadow" style="height: 250px;" id="chart_1"></div>
        <div class="flex_1 page-main-item box-shadow" style="height: 250px;" id="chart_2"></div>
    </div>
    <div class="page-main mt box-shadow">
        <div style="height: 300px;" id="chart_3"></div>
    </div> -->
    
</body>
<script type="text/html" id="status">
    {{# if (d.status==1) { }}	
      <span style="color:green;">成功</span>
    {{# } else { }}
      <span style="color:red;">失败</span>
    {{# } }}
  </script>
<script type="text/html" id="net_type">
    {{# if (d.net_type=='CT') { }}
        电信
	{{# } else  if (d.net_type == 'CU') { }}
        联通
    {{# } else  if (d.net_type == 'CM') { }}
        移动
    {{# } else { }}
        暂未检测
    {{# } }}
    
</script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script src="__PUBLIC__/echarts/echarts.min.js"></script>
<script src="__PUBLIC__/layui/layui.js"></script>


<script>
    var lists = [[{ 
              field: 'id', 
              title: '序号', 
              width: 40,
              type:'numbers',
            }, { 
              field: 'pro_name', 
              title: '项目名称', 
              width: 80 
            }, { 
              field: 'title', 
              title: '网站标题', 
              width: 100 
            }, { 
              field: 'source', 
              title: '来源', 
              width: 180 
            }, { 
              field: 'status', 
              title: '状态', 
              toolbar: '#status',
              width: 80 
            }, { 
              field: 'ip', 
              title: '访问IP', 
              width: 120 
            }, { 
              field: 'mobile', 
              title: '验证号码', 
              width: 120 
            }, { 
              field: 'net_type', 
              title: '类型', 
              toolbar: '#net_type',
              width: 120 
            }
            
            
            , { 
              field: 'add_time', 
              title: '创建时间', 
              width: 160,
              templet:"<div>{{layui.util.toDateString(d.add_time*1000, 'yyyy-MM-dd HH:mm:ss')}}</div>"
            }]];
    layui.use(['form', 'laydate', 'table'], function () {
        var form = layui.form, laydate = layui.laydate, table = layui.table;
        laydate.render({
            elem: '#create_time2', //指定元素
            range: true
        });

        table.render({
          elem: '#tables', 
          url: "{:url('access_list')}",
          page: true,
          cols: lists
        });

        $(".search-btn").click(function () {
          var status_seache		=$("#status_seache option:selected").val();
          var seach_time		=$("#create_time2").val();
        //   console.log(status_seache)
        //   console.log(seach_time)
        //   return false
          table.render({
            elem: '#tables', 
            url: "{:url('access_list')}?status_seache="+status_seache+"&seach_time="+seach_time,
            page: true,
            cols: lists
          });
        });
        table.init('demo', {
            limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
        });
        // $.ajax({
        //     url: "{:url('census_one')}",
        //     success: function(res){
        //         if(res.code == 0){
        //             // console.log()
        //             pieChart("chart_1",res.data.one,'成功率',2);
        //             // console.log(res.data.two)
        //             pieChart("chart_2",res.data.two,'项目占比',2,'');
        //         }
        //     }
        // });
        // $.ajax({
        //     url: "{:url('census_two')}",
        //     success:function(res){
        //         if(res.code==0){
        //             console.log(res);
        //             lineChart("chart_3",res.data);
        //         }
        //     }
        // })
    
        
        function pieChart(id,obj,title_name,type,two_obj) {
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            var title = [];
            var medi = '';
            if(type == 1){
                var medi = {
                        name: "中间图",
                        type: 'pie',
                        color:['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                        radius: [0, '35%'],
                        avoidLabelOverlap: false,
                        selectedMode: 'single',
                        label: {
                            position: 'inner'
                        },
                        itemStyle : {
                            normal : {
                                label : {
                                    position: 'inner'
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                        },
                        data:two_obj
                    }
            }
            $(obj).each(function(idx,el){
                title.push(el.name);
            })
            title.push("测试1")
            title.push("测试2")
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                }, 
               
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: title
                },
                series: [
                    
                    medi,
                    {
                        name: title_name,
                        type: 'pie',
                        color:['#2BB3D5','#1AE66B','#D7D5D2','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: obj
                    },
                    
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
        
        function lineChart(id,data){
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: data.name
                },
                grid: {
                    top:"10%",
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.time
                },
                yAxis: {
                    type: 'value'
                },
                series: data.data
            };
            
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }

    })
</script>